<template>
  <div class="browsehistory-page w-960">
    <div class="title"><p>浏览记录</p></div>
    <div v-if="!pagination.list.length" style="padding: 30px 0">
      <a-empty
        description="暂无数据"
        :image="require('~/assets/images/nodata.png')"
      />
    </div>
    <div v-else class="content">
      <div v-for="item in pagination.list" :key="item.date" class="modal">
        <div class="time-cat">
          <a-icon type="clock-circle" />{{ item.date }}
        </div>
        <div class="arc-list">
          <div
            v-for="itemName in item.children"
            :key="itemName.id"
            class="arc-modal"
          >
            <div class="left">
              <nuxt-link
                target="_blank"
                :to="`/post/${itemName.articleId}`"
                class="arc-title"
                >{{ itemName.articleTitle }}</nuxt-link
              >
              <p class="arc-desc">{{ itemName.description }}</p>
              <div class="info">
                <nuxt-link target="_blank" :to="`/user/${itemName.uid}`">{{
                  itemName.authorNickname
                }}</nuxt-link>
                <em>{{ itemName.viewCounts | splitNumber }} 阅读 · {{ itemName.likeCounts }} 赞 · {{ itemName.commentCounts }} 评论</em>
              </div>
            </div>
            <div v-if="itemName.coverImage" class="right">
              <img :src="itemName.coverImage" alt="articlecover" />
            </div>
            <i class="ri-close-line delete-history" @click="deleteHistory(item, itemName)"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ScrollLoadEvent from '~/util/scrollLoadEvent'
export default {
  name: 'BrowseHistory',
  layout: 'BaseLayout',
  async asyncData ({ $axios }) {
    const [pageNo, pageSize] = [1, 20]
    const { data } = await $axios.get(
      `/gimishare/api/v1/history?pageNo=${pageNo}&pageSize=${pageSize}`
    )
    const list = data.list.reduce((prev, cur) => {
      const target = prev.find((o) => o.date === cur.date)
      if (!target) {
        prev.push({ date: cur.date, children: [cur] })
      } else {
        target.children.push(cur)
      }
      return prev
    }, [])
    return {
      pagination: {
        list,
        pageNo,
        pageSize,
        total: data.total
      }
    }
  },

  data () {
    return {
      scrollLoadEvent: null
    }
  },

  mounted () {
    this.scrollLoadEvent = new ScrollLoadEvent(
      this.findBrowerHistorys.bind(this, true)
    )
    this.$nextTick(() => {
      this.scrollLoadEvent.bindScrollEvent()
    })
  },

  methods: {
    async findBrowerHistorys (isScroll) {
      if (isScroll) {
        this.pagination.pageNo++
        this.scrollLoadEvent.loadState = false
      }
      const { pageNo, pageSize } = this.pagination
      const { data } = await this.$axios.get(
        `/gimishare/api/v1/history?pageNo=${pageNo}&pageSize=${pageSize}`
      )
      const list = data.list.reduce((prev, cur) => {
        const target = prev.find((o) => o.date === cur.date)
        if (!target) {
          prev.push({ date: cur.date, children: [cur] })
        } else {
          target.children.push(cur)
        }
        return prev
      }, [])
      this.pagination.list.push(...list)
      if (isScroll) {
        if (pageNo >= Math.ceil(data.total / pageSize)) {
          this.scrollLoadEvent.loadState = false
        } else {
          this.scrollLoadEvent.loadState = true
        }
      }
    },

    /**
     * delete user history
     */
    async deleteHistory (parentItem, hisItem) {
      const id = hisItem.id
      try {
        await this.$axios.get(`/gimishare/api/v1/history/delete?id=${id}`)
        const idx = parentItem.children.findIndex((o) => o.id === id)
        parentItem.children.splice(idx, 1)
        if (!parentItem.children.length) {
          const idx = this.list.findIndex((o) => o.date === parentItem.date)
          this.list.splice(idx, 1)
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.browsehistory-page {
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  margin-top: 12px;
  .title {
    p {
      font-size: 18px;
      color: #000;
      font-weight: 600;
    }
    margin-bottom: 20px;
  }
  .content {
    .modal {
      &:not(:last-child) {
        margin-bottom: 30px;
      }
      .time-cat {
        border-bottom: 1px solid #f1f1f190;
        padding-bottom: 6px;
        color: #000;
        font-weight: 600;
        font-size: 14px;
        i {
          margin-right: 8px;
          font-size: 12px;
          position: relative;
          top: -1px;
          color: var(--primary-color);
        }
      }
      .arc-list {
        .arc-modal {
          display: flex;
          padding: 10px 0;
          position: relative;
          .delete-history {
            position: absolute;
            top: 5px;
            cursor: pointer;
            right: -6px;
            font-size: 18px;
            opacity: 0;
            transition: 0.2s;
            color: #000;
            pointer-events: none;
          }
          &:hover {
            .delete-history {
              opacity: 1;
              pointer-events: all;
            }
          }
          .left {
            flex: 1;
            width: 0;
            margin-right: 20px;
            p,
            a {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: block;
              &.arc-title {
                font-size: 17px;
                color: #000;
                font-weight: bold;
                &:hover {
                  text-decoration: underline;
                }
              }
              &.arc-desc {
                font-size: 14px;
                color: #4c4c4c;
                padding: 6px 0;
              }
            }
            .info {
              font-size: 12px;
              a {
                padding-right: 10px;
                color: #999;
                display: inline;
                &:hover {
                  color: #1e80ff;
                }
              }
              em {
                color: #819a9f;
                font-style: normal;
              }
            }
          }
          .right {
            width: 120px;
            height: 68px;
            margin-right: 20px;
            img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 2px;
            }
          }
        }
      }
    }
  }
}
</style>
